<template>
  <div class="login">
      <el-card class="box-card">
        <div slot="header" class="clearfix">
          <span class="title">登陆|注册</span>
        </div>
        <div>
          <el-form ref="form" :model="form" label-width="80px">
            <el-form-item label="用户名">
              <el-input v-model="form.username"></el-input>
            </el-form-item>
            <el-form-item label="密码">
              <el-input v-model="form.password"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button class="sub-btn" type="primary" @click="onSubmit">立即创建</el-button>
            </el-form-item>
          </el-form>
        </div>
      </el-card>
  </div>
</template>

<script>
import {mapActions} from 'vuex'
export default {
    name:'Login',
    data(){
      return{
        form:{
          username:'',
          password:''
        }
      }
    },
    components:{
      
    },
    methods:{
      ...mapActions(['setUserNameAction','setTokenAction']),
      onSubmit(){
        console.log('提交')
        this.$api.postLogin(this.form)
        .then(data=>{
          console.log(data)
          if(data.status==200){
            //存储起来token和用户名，存vuex
            this.setUserNameAction(data.data[0].username)
            this.setTokenAction(data.token)

            //存本地

            localStorage.setItem('egouser',data.data[0].username)
            localStorage.setItem('egotoken',data.data[0].token)
            //返回上一层
            this.$router.push('/');
          }else{
            this.$message.error(data.msg);
            this.form.username='';
            this.form.password='';
          }
        })
      }
    }
}
</script>

<style scoped>
.login {
    width: 100%;
}
.box-card {
    width: 600px;
    margin: 0 auto;
    margin-top: 100px;
}
.title{
  display: block;
  text-align: center;
}
.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}
.clearfix:after {
    clear: both;
}
.sub-btn{
  margin-left:160px;
}
</style>